Опис HTML тега < details >:

Тег <details></details> використовується в Html5 для зберігання інформації, яку можна приховати або показати на вимогу користувача.  Дію даного html-тега нагадує випадне по кліку меню. Дуже добре даний тег підходить для створення інтерактивних віджетів, які користувач може відкривати і закривати сам на свій розсуд. Також всередину можна вставляти різний контент. За умовчанням вміст тега не відображається, для зміни статусу застосовується атрибут open, який показує/закриває інформацію всередині тега.

Синтаксис HTML тега < details >:

<details>

текст

</details>

Параметри HTML тега < details>:

Присутність атрибуту open означає, що при перегляді інформація, яка знаходиться усередині тега details буде відображена відразу. Якщо ж ви хочете щоб інформація була прихована і відкривалася по кліку, використовуйте тоді тег <details> без атрибуту open.

Враховуючи що в результаті застосування тега details ми отримаємо фактично приховане підміню, в тому місці де буде активна область з'явиться або просто покажчик, або напис типу «докладніше». Для цього нам потрібне певне слово. Тут нам якраз і стане в нагоді тег <summary>, який використовується для оголошення заголовків для видимих частин тега details, при натисненні на який  можна  проглянути / приховати деталі.

Додаткові відомості HTML тега < details >:

Даний тег на даний момент підтримується тільки в браузері Гугл Хром .